<!--<template>
    <div class="bridgeBasic" style="overflow-y:auto;">
      <div class="bridgeBasicUp">
        <div class="bridgeBasicUpLeft" >
          <div class="line" style="display:flex">
            <div style="width: 50%">
              <span class="name">桥梁名称: </span>
              <span class="value">滨江大桥</span>
            </div>
            <div style="width: 50%">
              <span class="name">建造时间: </span>
              <span class="value">2020-12</span>
            </div>
          </div>
          <div class="line" style="display:flex">
            <div style="width: 50%">
              <span class="name">地点: </span>
              <span class="value">南通复兴路</span>
            </div>
            <div style="width: 50%">
              <span class="name">总长: </span>
              <span class="value">3152</span>
            </div>
          </div>
          <div class="line" style="display:flex">
            <div style="width: 50%">
              <span class="name">桥梁类型: </span>
              <span class="value">悬索桥</span>
            </div>
            <div style="width: 50%">
              <span class="name">评估分: </span>
              <span class="value">98.66</span>
            </div>
          </div>
          <div class="line" style="display:flex">
            <div style="width: 50%">
              <span class="name">面积: </span>
              <span class="value">119776</span>
            </div>
            <div style="width: 50%">
              <span class="name">等级: </span>
              <span class="value">城市快速路</span>
            </div>
          </div>
          <div class="line" style="display:flex">
            <div style="width: 50%">
              <span class="name">结构形式: </span>
              <span class="value">119776</span>
            </div>
            <div style="width: 50%">
              <span class="name">跨径组合: </span>
              <span class="value">201+850</span>
            </div>
          </div>
          <div class="line" style="display:flex">
            <div style="width: 50%">
              <span class="name">设计荷载: </span>
              <span class="value">公路一级</span>
            </div>
            <div style="width: 50%">
              <span class="name">养护单位: </span>
              <span class="value">xxx单位</span>
            </div>
          </div>
          <div class="line" style="display:flex">
            <div style="width: 50%">
              <span class="name">BCI分数: </span>
              <span class="value">98.66</span>
            </div>
            <div style="width: 50%">
              <span class="name">BSI: </span>
              <span class="value">100</span>
            </div>
          </div>
        </div>
        <div class="bridgeBasicUpRight">
          <el-image
            style="width: 100%;height: 100%"
            :src="url"
            ></el-image>
        </div>
      </div>
      <div class="bridgeBasicDown">
        <div class="bridgeBasicDownLeft">
          <CardContainer headerName="巡检率-&#45;&#45;&#45;&#45;统计时间: 2021-03-01">
            <template slot="card-content">
              <div  class="bridgeBasicDownLeftCharts">
                <div class='wrapper'>
                  <div class="inner">
                    <div class='chart' id='chart'></div>
                    <div class="btm"></div>
                  </div>
                </div>
              </div>
            </template>
          </CardContainer>
        </div>
        <div class="bridgeBasicDownRight">
          <CardContainer headerName="巡检养护">
            <template slot="card-content">
              <div  class="bridgeBasicDownRightCharts" style="display: flex">
                <div class='wrapper' style="width: 30%">
                  <div class="inner">
                    <span class="Num" style="margin-left: 70px;">
                    病害总数329210
                    </span>
                    <div class='chart' id='left'></div>
                    <div class="btm"></div>
                  </div>
                </div>
                <div class='wrapper1'style="width: 30%">
                   <span  style="margin-left: 5px; font-size: 20px;font-weight: 400;">
                    构件病害统计
                    </span>
                  <div class="inner1">
                    <div class='chart1' id='middle'></div>
                    <div class="btm1"></div>
                  </div>
                </div>
                <div class='wrapper2'style="width: 30%">
                   <span  style="margin-left: -110px; font-size: 20px;font-weight: 400;">
                    构件类型统计Top
                    </span>
                  <div class="inner2">
                    <div class='chart2' id='right'></div>
                    <div class="btm2"></div>
                  </div>
                </div>
               &lt;!&ndash; <div class="left" id="left"></div>
                <div class="middle"></div>
                <div class="right"></div>&ndash;&gt;
              </div>
            </template>
          </CardContainer>
        </div>
      </div>
    </div>
</template>

<script>
  import CardContainer from "@/views/healthMonitor/components/CardContainer";
  import echarts from "echarts";
  import echartsLiquidfill from 'echarts-liquidfill';
  export default {
    data() {
      return {
        url:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2576470603,1832996428&fm=26&gp=0.jpg',
        CarPie: "",
      }
    },
    mounted() {
      this.drawChart()
      this.leftChart()
      this.middleChart()
      this.rightChart()
    },
    methods: {
      drawChart () {
        // 基于准备好的dom，初始化echarts实例
        let chart = new echarts.init(document.getElementById('chart'))
        // 监听屏幕变化自动缩放图表
        window.addEventListener('resize', function () {
          chart.resize()
        })
        // 绘制图表
        chart.setOption({
          // 图表主标题
          title: {
            text: '巡检率', // 主标题文本，支持使用 \n 换行
            top: 140, // 定位 值: 'top', 'middle', 'bottom' 也可以是具体的值或者百分比
            left: 'center', // 值: 'left', 'center', 'right' 同上
            textStyle: { // 文本样式
              fontSize: 20,
              fontWeight: 600,
              color: '#fff'
            }
          },
          // 提示框组件
          tooltip: {
            trigger: 'item', // 触发类型, 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
            textStyle: {
              color: '#fff' // 文字颜色
            },
            // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
            // 水球图: {a}（系列名称），{b}（无），{c}（数值）
            // 使用函数模板   传入的数据值 -> value: number|Array,
            formatter: function (value) {
              return value.seriesName + ': ' + value.data * 100 + '%'
            }
          },
          series: [{
            type: 'liquidFill',
            name: '巡检率', // 系列名称，用于tooltip的显示，legend 的图例筛选
            radius: '80%', // 水球图的半径
            center: ['50%', '60%'], // 水球图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标
            // 水填充图的形状 circle 默认圆形  rect 圆角矩形  triangle 三角形
            // diamond 菱形  pin 水滴状 arrow 箭头状  还可以是svg的path
            shape: 'circle',
            phase: 0, // 波的相位弧度 不设置  默认自动
            direction: 'right', // 波浪移动的速度  两个参数  left 从右往左 right 从左往右
            outline: {
              show: true,
              borderDistance: 0, // 边框线与图表的距离 数字
              itemStyle: {
                opacity: 1, // 边框的透明度   默认为 1
                borderWidth: 1, // 边框的宽度
                shadowBlur: 1, // 边框的阴影范围 一旦设置了内外都有阴影
                shadowColor: '#fff', // 边框的阴影颜色,
                borderColor: '#41dcd8' // 边框颜色
              }
            },
            // 图形样式
            itemStyle: {
              color: '#4077eb', // 水球显示的背景颜色
              opacity: 0.5, // 波浪的透明度
              shadowBlur: 10 // 波浪的阴影范围
            },
            backgroundStyle: {
              color: '#407bf3', // 水球未到的背景颜色
              opacity: 0.5
            },
            // 图形的高亮样式
            emphasis: {
              itemStyle: {
                opacity: 0.8 // 鼠标经过波浪颜色的透明度
              }
            },
            // 图形上的文本标签
            label: {
              fontSize: 35,
              fontWeight: 400,
              color: '#fff'
            },
            data: [0.72] // 系列中的数据内容数组
          }]
        })
      },
      leftChart () {
        this.left = new echarts.init(document.getElementById('left'))
        this.left.setOption({
          tooltip: {
            trigger: 'item',
            formatter: ((item) => {
              return `数量：${item.value}`
            })
          },
          grid: {
            top: "8%",
            right: "1%",
            left: "1%",
            bottom: "1%",
          },
          xAxis: {
            show: true,
            type: "category",
            axisLine: {
              show: false,
            },
            axisTick: {
              alignWithLabel: true
            }
          },
          yAxis: {
            type: "value",
            show: false,
          },
          series: [{
            name: "今日车流量对比",
            type: "bar",
            itemStyle: {
              normal: {
                color: function (params) {
                  let _colorList = [
                    "#1F5FD3",
                    "#2061D3",
                    "#2A6FD8",
                    "#2467D5",
                    "#2669d6",
                    "#2A6FD8",
                    "#2C73D9",
                    "#2b6ed8",
                    "#337cdd",
                    "#327bdd",
                    "#3985df",
                    "#3b88e0",
                    "#3e8de1",
                    "#3f8fe3",
                    "#4193e3",
                    "#4497e4",
                    "#479be5",
                    "#4a9fe7",
                    "#51a9ea",
                    "#52adeb",
                    "#53aeeb",
                    "#57b2ec",
                    "#56b2ec",
                    "#59b6ed",
                    "#5bbaef",
                    "#5fbff0",
                    "#62c3f1",
                    "#6dcbf4",
                    "#64c8f3",
                    "#68ccf4",
                    "#6bd0f5",
                    "#6cd0f6",
                    "#6ed4f6",
                    "#70d9f8",
                    "#70d9f8",
                    "#74defa",
                    "#73ddf9",
                  ];
                  return _colorList[params.dataIndex];
                },
              },
            },
            data: [100, 23, 45, 55, 66, 88, 100, 23, 32, 34, 44, 66, 88, 65, 99, 22, 34, 56, 87, 22, 33, 21,
              33, 66, 12, 33, 44, 56, 77],
          }],
        });
      },
      middleChart () {
        this.middle = new echarts.init(document.getElementById('middle'))
        this.middle.setOption({
          grid: {
            left: '5%',
            right: '5%',
            bottom: '5%',
            top: '10%',
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'none'
            },

          },
          backgroundColor: '#fff',
          xAxis: {
            show: false,
            type: 'value'
          },
          yAxis: [{
            type: 'category',
            inverse: true,
            axisLabel: {
              show: true,
              textStyle: {
                color: 'black'
              },
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            data: ['构件', '构件', '构件', '路灯']
          }, {
            type: 'category',
            inverse: true,
            axisTick: 'none',
            axisLine: 'none',
            show: true,
            axisLabel: {
              textStyle: {
                color: 'black',
                fontSize: '12'
              },
              formatter: function(value) {

                  return value

              },
            },
            data: [12, 9, 7, 5]
          }],
          series: [{
            type: 'bar',
            zlevel: 1,
            itemStyle: {
              normal: {
                barBorderRadius: 30,
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                  offset: 0,
                  color: 'white'
                }, {
                  offset: 1,
                  color: 'rgb(46,200,207,1)'
                }]),
              },
            },
            barWidth: 20,
            data: [12, 9, 7, 5]
          },

          ]
        });
      },
      rightChart () {
        this.right = new echarts.init(document.getElementById('right'))
        this.right.setOption({
          title: [{
            text: "{name|" + '巡检病害统计' + "}\n{val|" + 112 + "}",
            top: "center",
            left: "29%",
            textStyle: {
              rich: {
                name: {
                  fontSize: 12,
                  fontWeight: 400,
                  color: "#C9CED4",
                  padding: [10, 0],
                },
                val: {
                  fontSize: 24,
                  fontWeight: "bold",
                  color: "#444444",
                },
              },
            },
            textAlign: "center",
          }, ],
          legend: {
            orient: "vertical",
            top: "center",
            right: "10%",
            data: ["小型车", "中型车", "大型车", "大货车", "特种车", "其他车"],
            itemWidth: 12,
            itemHeight: 10,
            /* formatter: (name) => {
               return `${name}  ${_obj[name]["value"]}`;
             },*/
          },
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)",
          },
          color: [
            "#437CDF",
            "#8B57DF",
            "#32D6CD",
            "#32D17E",
            "#FBE033",
            "#FCAA5D",
          ],
          series: [{
            name: "巡检病害",
            type: "pie",
            radius: ["50%", "60%"],
            center: ["30%", "50%"],
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            data: [70,80,80,20,30],
          }, ]
        });
      },
    },
    components: {
      CardContainer,
    },
    }
</script>

<style lang="scss" scoped>
  .bridgeBasic{
    width: 1628px;

    background: #ffffff;
    box-shadow: 0px 0px 5px 0px rgba(232, 232, 232, 0.53);
    .bridgeBasicUp{
      display: flex;
      .bridgeBasicUpLeft{
        width: 33.33%;
        .line {

          background: white;
          padding: 17px 20px;
          box-sizing: border-box;
          .name {
            color: rgba(153, 153, 153, 1);
            margin-right: 5px;
          }
          .value {
            color: rgba(51, 51, 51, 1);
            margin-right: 20px;
          }
        }
      }
      .bridgeBasicUpRight{
        margin-left: 5px;
        width: 66.66%;
        height: 385.6px;
        background: #3B74BB;
      }
    }
    .bridgeBasicDown{
      display: flex;
      .bridgeBasicDownLeft{
        width: 33.33%;
        .wrapper {
          width: 100%;
          .inner {
            position: relative;
            width: 90%;
            height: 300px;

            margin: 10px 10px 0;

            background-size: 100% 100%;
            .chart {
              width: 200px;
              height: 200px;
              background-size: 80% 80%;
              margin: 10px auto 0;
            }
            .btm {
              width: 320px;
              height: 25px;

              background-size: 100% 100%;
              margin: 0 auto;
            }
          }
        }
      }
      .bridgeBasicDownRight{
        width: 66.66%;
        .wrapper {
          width: 100%;
          .inner {
            position: relative;
            width: 100%;
            height: 300px;
            margin-left: -30px;
            background-size: 100% 100%;
            .Num{
              font-size: 20px;
              font-weight: 400;
              color: rgba(252, 170, 93, 1);
              margin-top: 12px;
            }
            .chart {
              width: 200px;
              height: 250px;
              background-size: 80% 80%;
              margin: 10px auto 0;
            }
            .btm {
              width: 320px;
              height: 25px;

              background-size: 100% 100%;
              margin: 0 auto;
            }
          }
        }
        .wrapper1 {
          width: 100%;
          .inner1 {
            position: relative;
            width: 100%;
            height: 300px;
            margin-left: -100px;
            margin-top: 50px;
            background-size: 100% 100%;
            .Num1{
              font-size: 20px;
              font-weight: 400;
              color: rgba(252, 170, 93, 1);
              margin-top: 12px;
            }
            .chart1 {
              width: 200px;
              height: 200px;
              background-size: 80% 80%;
              margin: 10px auto 0;
            }
            .btm1 {
              width: 320px;
              height: 25px;

              background-size: 100% 100%;
              margin: 0 auto;
            }
          }
        }
        .wrapper2 {
          width: 100%;
          .inner2 {
            position: relative;
            width: 100%;
            height: 300px;
            margin-left: -150px;
            margin-top: 50px;
            background-size: 100% 100%;
            .chart2 {
              width: 200px;
              height: 200px;
              background-size: 80% 80%;
              margin: 10px auto 0;
            }
            .btm2 {
              width: 320px;
              height: 25px;

              background-size: 100% 100%;
              margin: 0 auto;
            }
          }
        }
      }
    }
}
</style>-->

<template>
  <div class="bridgeBasic" style="overflow-y:auto;">
    <div class="bridgeBasicUp">
      <div class="bridgeBasicUpLeft" >
        <div class="line" style="display:flex">
          <div style="width: 50%">
            <span class="name">桥梁名称: </span>
            <span class="value">滨江大桥</span>
          </div>
          <div style="width: 50%">
            <span class="name">建造时间: </span>
            <span class="value">2020-12</span>
          </div>
        </div>
        <div class="line" style="display:flex">
          <div style="width: 50%">
            <span class="name">地点: </span>
            <span class="value">南通复兴路</span>
          </div>
          <div style="width: 50%">
            <span class="name">总长: </span>
            <span class="value">3152</span>
          </div>
        </div>
        <div class="line" style="display:flex">
          <div style="width: 50%">
            <span class="name">桥梁类型: </span>
            <span class="value">悬索桥</span>
          </div>
          <div style="width: 50%">
            <span class="name">评估分: </span>
            <span class="value">98.66</span>
          </div>
        </div>
        <div class="line" style="display:flex">
          <div style="width: 50%">
            <span class="name">面积: </span>
            <span class="value">119776</span>
          </div>
          <div style="width: 50%">
            <span class="name">等级: </span>
            <span class="value">城市快速路</span>
          </div>
        </div>
        <div class="line" style="display:flex">
          <div style="width: 50%">
            <span class="name">结构形式: </span>
            <span class="value">119776</span>
          </div>
          <div style="width: 50%">
            <span class="name">跨径组合: </span>
            <span class="value">201+850</span>
          </div>
        </div>
        <div class="line" style="display:flex">
          <div style="width: 50%">
            <span class="name">设计荷载: </span>
            <span class="value">公路一级</span>
          </div>
          <div style="width: 50%">
            <span class="name">养护单位: </span>
            <span class="value">中铁大桥院</span>
          </div>
        </div>
        <div class="line" style="display:flex">
          <div style="width: 50%">
            <span class="name">BCI分数: </span>
            <span class="value">98.66</span>
          </div>
          <div style="width: 50%">
            <span class="name">BSI: </span>
            <span class="value">100</span>
          </div>
        </div>
      </div>
      <div class="bridgeBasicUpRight">
        <el-image
          style="width: 100%;height: 100%"
          :src="url"
        ></el-image>
      </div>
    </div>
    <div class="bridgeBasicDown">
      <div class="bridgeBasicDownLeft">
        <CardContainer headerName="巡检率-----统计时间: 2021-03-01">
          <template slot="card-content">
            <div  class="bridgeBasicDownLeftCharts">
              <div class='wrapper'>
                <div class="inner">
                  <div class='chart' id='chart'></div>
                  <div class="btm"></div>
                </div>
              </div>
            </div>
          </template>
        </CardContainer>
      </div>
      <div class="bridgeBasicDownRight">
        <CardContainer headerName="巡检养护">
          <template slot="card-content">
            <div  class="bridgeBasicDownRightCharts" style="display: flex">
              <div class='wrapper' style="width: 30%">
                <div class="inner">
                    <span class="Num" style="margin-left: 70px;">
                    病害总数210
                    </span>
                  <div class='chart' id='left'></div>
                  <div class="btm"></div>
                </div>
              </div>
              <div class='wrapper1'style="width: 30%">
                   <span  style="margin-left: 5px; font-size: 20px;font-weight: 400;">
                    构件病害统计
                    </span>
                <div class="inner1">
                  <div class='chart1' id='middle'></div>
                  <div class="btm1"></div>
                </div>
              </div>
              <div class='wrapper2'style="width: 30%">
                   <span  style="margin-left: -110px; font-size: 20px;font-weight: 400;">
                    构件类型统计Top
                    </span>
                <div class="inner2">
                  <div class='chart2' id='right'></div>
                  <div class="btm2"></div>
                </div>
              </div>
              <!-- <div class="left" id="left"></div>
               <div class="middle"></div>
               <div class="right"></div>-->
            </div>
          </template>
        </CardContainer>
      </div>
    </div>
  </div>
</template>

<script>
  import CardContainer from "@/views/healthMonitor/components/CardContainer";
  import echarts from "echarts";
  import echartsLiquidfill from 'echarts-liquidfill';//特别注意版本"echarts-liquidfill": "^2.0.2",
  export default {
    data() {
      return {
        url:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2576470603,1832996428&fm=26&gp=0.jpg',
        CarPie: "",
      }
    },
    mounted() {
      this.drawChart()
      this.leftChart()
      this.middleChart()
      this.rightChart()
    },
    methods: {
      drawChart () {
        // 基于准备好的dom，初始化echarts实例
        let chart = new echarts.init(document.getElementById('chart'))
        // 监听屏幕变化自动缩放图表
        window.addEventListener('resize', function () {
          chart.resize()
        })
        // 绘制图表
        chart.setOption({
          // 图表主标题
          title: {
            text: '巡检率', // 主标题文本，支持使用 \n 换行
            top: 140, // 定位 值: 'top', 'middle', 'bottom' 也可以是具体的值或者百分比
            left: 'center', // 值: 'left', 'center', 'right' 同上
            textStyle: { // 文本样式
              fontSize: 20,
              fontWeight: 600,
              color: '#fff'
            }
          },
          // 提示框组件
          tooltip: {
            trigger: 'item', // 触发类型, 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
            textStyle: {
              color: '#fff' // 文字颜色
            },
            // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
            // 水球图: {a}（系列名称），{b}（无），{c}（数值）
            // 使用函数模板   传入的数据值 -> value: number|Array,
            formatter: function (value) {
              return value.seriesName + ': ' + value.data * 100 + '%'
            }
          },
          series: [{
            type: 'liquidFill',
            name: '巡检率', // 系列名称，用于tooltip的显示，legend 的图例筛选
            radius: '80%', // 水球图的半径
            center: ['50%', '60%'], // 水球图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标
            // 水填充图的形状 circle 默认圆形  rect 圆角矩形  triangle 三角形
            // diamond 菱形  pin 水滴状 arrow 箭头状  还可以是svg的path
            shape: 'circle',
            phase: 0, // 波的相位弧度 不设置  默认自动
            direction: 'right', // 波浪移动的速度  两个参数  left 从右往左 right 从左往右
            outline: {
              show: true,
              borderDistance: 0, // 边框线与图表的距离 数字
              itemStyle: {
                opacity: 1, // 边框的透明度   默认为 1
                borderWidth: 1, // 边框的宽度
                shadowBlur: 1, // 边框的阴影范围 一旦设置了内外都有阴影
                shadowColor: '#fff', // 边框的阴影颜色,
                borderColor: '#41dcd8' // 边框颜色
              }
            },
            // 图形样式
            itemStyle: {
              color: '#4077eb', // 水球显示的背景颜色
              opacity: 0.5, // 波浪的透明度
              shadowBlur: 10 // 波浪的阴影范围
            },
            backgroundStyle: {
              color: '#407bf3', // 水球未到的背景颜色
              opacity: 0.5
            },
            // 图形的高亮样式
            emphasis: {
              itemStyle: {
                opacity: 0.8 // 鼠标经过波浪颜色的透明度
              }
            },
            // 图形上的文本标签
            label: {
              fontSize: 35,
              fontWeight: 400,
              color: '#fff'
            },
            data: [0.72] // 系列中的数据内容数组
          }]
        })
      },
      leftChart () {
        this.left = new echarts.init(document.getElementById('left'))
        this.left.setOption({
          tooltip: {
            trigger: 'item',
            formatter: ((item) => {
              return `数量：${item.value}`
            })
          },
          grid: {
            top: "8%",
            right: "1%",
            left: "1%",
            bottom: "1%",
          },
          xAxis: {
            show: true,
            type: "category",
            axisLine: {
              show: false,
            },
            axisTick: {
              alignWithLabel: true
            }
          },
          yAxis: {
            type: "value",
            show: false,
          },
          series: [{
            name: "今日车流量对比",
            type: "bar",
            itemStyle: {
              normal: {
                color: function (params) {
                  let _colorList = [
                    "#1F5FD3",
                    "#2061D3",
                    "#2A6FD8",
                    "#2467D5",
                    "#2669d6",
                    "#2A6FD8",
                    "#2C73D9",
                    "#2b6ed8",
                    "#337cdd",
                    "#327bdd",
                    "#3985df",
                    "#3b88e0",
                    "#3e8de1",
                    "#3f8fe3",
                    "#4193e3",
                    "#4497e4",
                    "#479be5",
                    "#4a9fe7",
                    "#51a9ea",
                    "#52adeb",
                    "#53aeeb",
                    "#57b2ec",
                    "#56b2ec",
                    "#59b6ed",
                    "#5bbaef",
                    "#5fbff0",
                    "#62c3f1",
                    "#6dcbf4",
                    "#64c8f3",
                    "#68ccf4",
                    "#6bd0f5",
                    "#6cd0f6",
                    "#6ed4f6",
                    "#70d9f8",
                    "#70d9f8",
                    "#74defa",
                    "#73ddf9",
                  ];
                  return _colorList[params.dataIndex];
                },
              },
            },
            data: [100, 23, 45, 55, 66, 88, 100, 23, 32, 34, 44, 66, 88, 65, 99, 22, 34, 56, 87, 22, 33, 21,
              33, 66, 12, 33, 44, 56, 77],
          }],
        });
      },
      middleChart () {
        this.middle = new echarts.init(document.getElementById('middle'))
        this.middle.setOption({
          grid: {
            left: '5%',
            right: '5%',
            bottom: '5%',
            top: '10%',
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'none'
            },

          },
          backgroundColor: '#fff',
          xAxis: {
            show: false,
            type: 'value'
          },
          yAxis: [{
            type: 'category',
            inverse: true,
            axisLabel: {
              show: true,
              textStyle: {
                color: 'black'
              },
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            data: ['构件', '构件', '构件', '路灯']
          }, {
            type: 'category',
            inverse: true,
            axisTick: 'none',
            axisLine: 'none',
            show: true,
            axisLabel: {
              textStyle: {
                color: 'black',
                fontSize: '12'
              },
              formatter: function(value) {

                return value

              },
            },
            data: [12, 9, 7, 5]
          }],
          series: [{
            type: 'bar',
            zlevel: 1,
            itemStyle: {
              normal: {
                barBorderRadius: 30,
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                  offset: 0,
                  color: 'white'
                }, {
                  offset: 1,
                  color: 'rgb(46,200,207,1)'
                }]),
              },
            },
            barWidth: 20,
            data: [12, 9, 7, 5]
          },

          ]
        });
      },
      rightChart () {
        this.right = new echarts.init(document.getElementById('right'))
        this.right.setOption({
          title: [{
            text: "{name|" + '巡检病害统计' + "}\n{val|" + 112 + "}",
            top: "center",
            left: "29%",
            textStyle: {
              rich: {
                name: {
                  fontSize: 12,
                  fontWeight: 400,
                  color: "#C9CED4",
                  padding: [10, 0],
                },
                val: {
                  fontSize: 24,
                  fontWeight: "bold",
                  color: "#444444",
                },
              },
            },
            textAlign: "center",
          }, ],
          legend: {
            orient: "vertical",
            top: "center",
            right: "10%",
            data: ["小型车", "中型车", "大型车", "大货车", "特种车", "其他车"],
            itemWidth: 12,
            itemHeight: 10,
            /* formatter: (name) => {
               return `${name}  ${_obj[name]["value"]}`;
             },*/
          },
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)",
          },
          color: [
            "#437CDF",
            "#8B57DF",
            "#32D6CD",
            "#32D17E",
            "#FBE033",
            "#FCAA5D",
          ],
          series: [{
            name: "巡检病害",
            type: "pie",
            radius: ["50%", "60%"],
            center: ["30%", "50%"],
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            data: [70,80,80,20,30],
          }, ]
        });
      },
    },
    components: {
      CardContainer,
    },
  }
</script>

<style lang="scss" scoped>
  .bridgeBasic{
    width: 1628px;

    background: #ffffff;
    box-shadow: 0px 0px 5px 0px rgba(232, 232, 232, 0.53);
    .bridgeBasicUp{
      display: flex;
      .bridgeBasicUpLeft{
        width: 33.33%;
        .line {

          background: white;
          padding: 17px 20px;
          box-sizing: border-box;
          .name {
            color: rgba(153, 153, 153, 1);
            margin-right: 5px;
          }
          .value {
            color: rgba(51, 51, 51, 1);
            margin-right: 20px;
          }
        }
      }
      .bridgeBasicUpRight{
        margin-left: 5px;
        width: 66.66%;
        height: 385.6px;
        background: #3B74BB;
      }
    }
    .bridgeBasicDown{
      display: flex;
      .bridgeBasicDownLeft{
        width: 33.33%;
        .wrapper {
          width: 100%;
          .inner {
            position: relative;
            width: 90%;
            height: 300px;

            margin: 10px 10px 0;

            background-size: 100% 100%;
            .chart {
              width: 200px;
              height: 200px;
              background-size: 80% 80%;
              margin: 10px auto 0;
            }
            .btm {
              width: 320px;
              height: 25px;

              background-size: 100% 100%;
              margin: 0 auto;
            }
          }
        }
      }
      .bridgeBasicDownRight{
        width: 66.66%;
        .wrapper {
          width: 100%;
          .inner {
            position: relative;
            width: 100%;
            height: 300px;
            margin-left: -30px;
            background-size: 100% 100%;
            .Num{
              font-size: 20px;
              font-weight: 400;
              color: rgba(252, 170, 93, 1);
              margin-top: 12px;
            }
            .chart {
              width: 200px;
              height: 250px;
              background-size: 80% 80%;
              margin: 10px auto 0;
            }
            .btm {
              width: 320px;
              height: 25px;

              background-size: 100% 100%;
              margin: 0 auto;
            }
          }
        }
        .wrapper1 {
          width: 100%;
          .inner1 {
            position: relative;
            width: 100%;
            height: 300px;
            margin-left: -100px;
            margin-top: 50px;
            background-size: 100% 100%;
            .Num1{
              font-size: 20px;
              font-weight: 400;
              color: rgba(252, 170, 93, 1);
              margin-top: 12px;
            }
            .chart1 {
              width: 200px;
              height: 200px;
              background-size: 80% 80%;
              margin: 10px auto 0;
            }
            .btm1 {
              width: 320px;
              height: 25px;

              background-size: 100% 100%;
              margin: 0 auto;
            }
          }
        }
        .wrapper2 {
          width: 100%;
          .inner2 {
            position: relative;
            width: 100%;
            height: 300px;
            margin-left: -150px;
            margin-top: 50px;
            background-size: 100% 100%;
            .chart2 {
              width: 200px;
              height: 200px;
              background-size: 80% 80%;
              margin: 10px auto 0;
            }
            .btm2 {
              width: 320px;
              height: 25px;

              background-size: 100% 100%;
              margin: 0 auto;
            }
          }
        }
      }
    }
  }
</style>
